<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .top {
        width: 100%;
        height: 200px;
        background-color: thistle;
    }
    
    .center .shop {
        display: flex;
        justify-content: space-between;
    }
    
    .center {
        padding: 5px 20px 0px 20px;
        /* background-color: aquamarine; */
    }
    
    .good {
        /* box-sizing: border-box; */
        padding: 10px 0px 10px 2px;
        display: flex;
        width: 100%;
        /* background-color: wheat; */
        height: 100px;
    }
    
    .left {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    
    .left .pic {
        width: 100px;
        height: 100px;
    }
    
    .good .right p {
        font-weight: 700;
        font-size: 14px;
    }
    
    .good .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        /* background-color: turquoise; */
    }
    
    .good .right .price {
        font-size: 14px;
        color: red;
        /* margin-top: 40px; */
    }
    
    .pic {
        border: 1px solid rgb(195, 189, 189);
    }
    
    .good .right .btn {
        display: flex;
        justify-content: space-between;
    }
    
    .good .right .btn1 .count {
        line-height: 15px;
        width: 15px;
        height: 15px;
        /* height: 10px; */
        font-size: 15px;
        text-align: center;
        border: 1px solid deepskyblue;
        display: inline-block;
        border-radius: 50%;
        color: white;
        margin-bottom: 5px;
    }
    
    .good .right .btn1 .count-left {
        color: deepskyblue;
    }
    
    .good .right .btn1 .count-right {
        background-color: deepskyblue;
    }
    
    .good .right .btn1 .num {
        font-size: 14px;
    }
    
    .empty {
        position: absolute;
        margin: 200px 60px;
    }
    
    .footer {
        position: fixed;
        bottom: 0;
        padding: 0px 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        width: 100%;
        height: 40px;
        background-color: rgb(108, 102, 102);
    }
    
    .footer .account {
        color: white;
        border-radius: 10px;
        height: 30px;
        margin-top: 5px;
        background-color: rgb(43, 192, 130);
        padding: 0px 20px;
        /* padding-left: 10px; */
        border: 0px;
    }
    
    .footer span {
        font-size: 14px;
        color: white;
    }
</style>

<body>
    <div id="app">
        <div class="top"></div>
        <div class="center">
            <div class="shop">
                <div>已选商品</div>
                <div @click="empty1">清空</div>
                <div class="empty" v-show="list.length==0">好寂寞,快添加些商品来陪我~</div>
            </div>
            <div class="good" v-for="(item,index) in list">
                <div class="left">
                    <img :src="item.pic" class="pic">
                </div>
                <div class="right">
                    <p>{{item.name}}</p>
                    <div class="btn">
                        <span class="price">￥{{item.price}}
                        </span>
                        <div class="btn1">
                            <span class="count count-left" @click="reduce(item)">-</span>
                            <span class="num">{{item.count}}</span>
                            <span class="count-right count" @click="add(item)">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <span>总价:{{totalprice}} 数量:{{totalcount}}</span>
            <button class="account">去结算</button>
        </div>
    </div>
    <script src="vue-2.5.21.js"></script>
    <script src="shopping cart.js"></script>
</body>

</html>